<template>
  <p>文件位置: src/styles/merak.scss</p>
  <el-table class="merak-table-container" :data="data">
    <el-table-column prop="var" label="类名">
      <template #default="{ row }">
        <div class="copy" @click="handleCopy(row.var)">
          <merak-icon size="16">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
              <path
                d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
              />
            </svg>
          </merak-icon>
          <span>{{ row.var }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="mean" label="含义" />
  </el-table>

  <h3>示例</h3>
  <styleExample />
</template>

<script setup lang="ts">
import { reactive } from "vue";

import { ElTable, ElTableColumn, ElMessage } from "element-plus";

import MerakIcon from "../../../../../components/MerakIcon/index.vue";

import styleExample from "./styleExample.vue";

const data = reactive([
  { var: "merak-container-has-aside", mean: "用于拥有侧边栏盒子（无视数量）的布局样式" },
  { var: "merak-container-has-search", mean: "用于拥有搜索的表格布局样式" },
  { var: "merak-aside", mean: "页面侧边栏盒子的样式" },
  { var: "merak-card", mean: "页面容器盒子的样式" },
  { var: "merak-overflow-x", mean: "用于横向滚动的盒子样式（属于 merak-card 的内嵌盒子）" },
  { var: "merak-overflow-y", mean: "用于纵向滚动的盒子样式（属于 merak-card 的内嵌盒子）" },
  { var: "merak-table-wrapper", mean: "用于 xtable 父容器的样式" },
  { var: "merak-table-container", mean: "用于 element table 复用 xtable 的样式" }
]);

const handleCopy = (text: string) => {
  navigator.clipboard
    .writeText(text)
    .then(() => {
      ElMessage.success("复制成功");
    })
    .catch(() => {
      throw "当前浏览器不支持 copy api";
    });
};
</script>

<style scoped>
.copy {
  display: flex;
  align-items: center;
  cursor: pointer;
  & > :not(:first-child) {
    margin-left: 10px;
  }
}
</style>
